/* eslint-disable */
<template>
  <div class="passenger-container">
    <div class="passenger-title">市场客流统计</div>
    <div class="passenger-select">
      <div class="passenger-select1">
        <market @listenEvent="mkfn" />
      </div>
      <div class="passenger-select2">
        <dateselect @listenEvent="dtfn" />
      </div>
    </div>
    <div class="passenger-num">
      <passnum>
        <template v-slot:header>市场总数</template>
        <!-- {{this.formatNum(this.passdata.marketCount+"")}} -->
        <countTo :num="(this.passdata.marketCount)*1"></countTo>
      </passnum>
      <passnum>
        <template v-slot:header>总客流</template>
        <!-- {{this.formatNum(this.passdata.passengerCount+"")}} -->
        <countTo :num="(this.passdata.passengerCount)*1"></countTo>
      </passnum>
      <passnum>
        <template v-slot:header>去重客流</template>
        <!-- {{this.formatNum(this.passdata.passengerDubRemovalCount+"")}} -->
         <countTo :num="(this.passdata.passengerDubRemovalCount)*1"></countTo>
      </passnum>
    </div>

    <div class="echarts">
      <Echart :echartObj="echartObj" />
    </div>

    <div class="form">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="市场名称"></el-table-column>
        <el-table-column prop="cnt" label="总客流"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="去重客流"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import dateselect from "@/views/modules/dateselect";
import market from "@/views/modules/market";
import Echart from "@/components/echart/echart";
import passnum from "@/views/modules/passnum";
import countTo from "@/views/modules/countTo";
export default {
  name: "passenger",
  components: {
    dateselect,
    market,
    Echart,
    passnum,
    countTo
  },
  computed: {},
  data() {
    return {
      form: {},

      value1: "",
      tableData: [],
      date: {
        marketId: 0,
        startDate: "2020-07-17",
        endDate: "2020-07-17"
        // day_range: 0,
        // interval:"hour"
      },
      passdata: {
        marketCount: 0,
        passengerCount: 0,
        passengerDubRemovalCount: 0
      },
      count: 3,
      timesharing: [],
      value1: "",
      value2: "",
      nowday: 0,
      yesday: 0,
      echartObj: {}
    };
  },
  created() {
    this.marketId = 0;
    this.nowday = this.getDay(0);
    this.yesday = this.getDay(-1);
  },
  mounted() {
    // console.log(this.date.startDate)
    this.marketId = 0;
    this.getPassTotal();
    this.getPasslist();
    this.getsharing();
    // console.log(this.timesharing)
  },
  methods: {
    getPassTotal() {
      this.$store
        .dispatch("passenger/getPassTotal", this.date)
        .then(data => {
          if (data) {
            // console.log(data);
            this.passdata = data;
          }
          // console.log(data);
          else {
            this.passdata = "";
            this.open4();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getPasslist() {
      this.$store
        .dispatch("passenger/getPasslist", this.date)
        .then(data => {
          if (data) {
            this.tableData = data;
            // console.log(data);
          } else {
            this.tableData = "";
            this.open4();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    getsharing() {
      this.$store
        .dispatch("passenger/getsharing", this.date)
        .then(data => {
          // console.log(data);
          // this.timesharing=data;
          // console.log(this.timesharing)
          if (data) {
            // barXiLineEchart
            this.timesharing = data;
            // console.log(data);
            let dataname = [];
            let countnum = [];
            let countnummax = 0;
            let dupRemovalCount = [];
            let dupRemovalCountmax = 0;
            for (let i = 0; i < this.timesharing.length; i++) {
              if (
                this.date.startDate == this.nowday ||
                this.date.startDate == this.yesday
              ) {
                dataname.push(this.timesharing[i].key.substring(11));
              } else dataname.push(this.timesharing[i].key.substring(0, 11));
              if (this.timesharing[i].count >= countnummax) {
                countnummax = this.timesharing[i].count;
              }
              countnum.push(this.timesharing[i].count);
              if (this.timesharing[i].dupRemovalCount >= dupRemovalCountmax) {
                dupRemovalCountmax = this.timesharing[i].dupRemovalCount;
              }
              dupRemovalCount.push(this.timesharing[i].dupRemovalCount);
            }
            let opt = {
              color: ["#2c9dfb", "#FF6145"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  crossStyle: {
                    color: "#999"
                  }
                }
              },

              legend: {
                data: ["数量", "去重数量"]
              },
              xAxis: [
                {
                  type: "category",
                  data: dataname,
                  axisPointer: {
                    type: "shadow"
                  }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  name: "数量",
                  min: 0,
                  max: countnummax,
                  interval: countnummax / 5,
                  axisLabel: {
                    formatter: "{value} 人"
                  }
                },
                {
                  type: "value",
                  name: "去重数量",
                  min: 0,
                  max: dupRemovalCountmax,
                  interval: dupRemovalCountmax / 5,
                  axisLabel: {
                    formatter: "{value} 人"
                  }
                }
              ],
              series: [
                {
                  name: "数量",
                  type: "bar",
                  data: countnum
                },
                {
                  name: "去重数量",
                  type: "line",
                  // data: dupRemovalCountnum
                  data: dupRemovalCount
                }
              ]
            };
            this.echartObj = opt;
            // console.log(this.echartObj)
          } else {
            this.timesharing = "";
            this.open4();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    mkfn(param) {
      this.date.marketId = param.marketId;
      // console.log(this.date);
      this.getPassTotal();
      this.getPasslist();
      this.getsharing();
    },
    dtfn(param) {
      this.date.startDate = param.startDate;
      this.date.endDate = param.endDate;
      // console.log(this.date);
      this.getPassTotal();
      this.getPasslist();
      this.getsharing();
    },
    open4() {
      this.$message.error("该市场不存在客流采集设备");
    },
    formatNum(strNum) {
      let len = strNum.length;
      if (len <= 3) {
        return strNum;
      }

      if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
        return strNum;
      }

      let a = RegExp.$1,
        b = RegExp.$2,
        c = RegExp.$3;

      let re = new RegExp();

      re.compile("(\\d)(\\d{3})(,|$)");

      while (re.test(b)) {
        b = b.replace(re, "$1,$2$3");
      }

      return a + "" + b + "" + c;
    },
    getDay(day) {
      let today = new Date();
      let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      let tYear = today.getFullYear();
      let tMonth = today.getMonth();
      let tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      let m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    }
  }
};
</script>

<style lang="scss" scoped>
.passenger {
  &-container {
    margin: 20px;
  }
  &-title {
    font-size: 18px;
    line-height: 46px;
    background: white;
    padding-left: 15px;
  }
  &-body {
    margin-bottom: 20px;
  }
  &-select {
    font-size: 14px;
  }
}

.passenger-select {
  margin-top: 15px;
  background: #fff;
  padding: 10px;
  padding-left: 15px;
}
.passenger-num {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  padding-left: 35px;
}

.echarts {
  text-align: center;
  height: 300px;
  background: #fff;
  margin-bottom: 15px;
}

::v-deep .el-table th {
  background: #e5e5e5;
}
::v-deep .el-table .cell {
  text-align: center;
}
</style>
